<template>
	<view>
		<form @submit="formSubmit" class="form">
			<view class="bg">
				<view class="uni-form-item uni-column">
					<view class="title">养护时间</view>
					<view class="uni-input-group">
						<picker mode="date" :value="date" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">养护地块</view>
					<view>
						<picker @change="bindAreaPickerChange" :value="areaIndex" :range="areaList">
							<view class="uni-input">{{areaList[areaIndex]}}</view>
						</picker>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">养护工作</view>
					<view>
						<picker @change="bindWorkPickerChange" :value="workIndex" :range="workList">
							<view class="uni-input">{{workList[workIndex]}}</view>
						</picker>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">养护工作量</view>
					<view>
						<input class="uni-input" name="input" placeholder="这是一个输入框" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">养护公司</view>
					<input class="uni-input" name="input" placeholder="请输入养护公司" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">养护人员</view>
					<view>
						<picker @change="bindPersonPickerChange" :value="personIndex" :range="personList">
							<view class="uni-input">{{personList[personIndex]}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="bg">
				<view class="uploader" @tap="chooseImage">
					<view class="iconfont icon-guanbi"></view>
					<view class="title">养护现场照片</view>
				</view>
			</view>
			<view class="btn-box">
				<button type="primary" form-type="submit">提  交</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '',
				area: '',
				areaIndex: 0,
				areaList: ['一', '二', '三'],
				
				work: '',
				workIndex: 0,
				workList: ['一', '二', '三'],
				
				personIndex:0,
				personList: ['一', '二', '三'],
			};
		},
		methods: {

			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindAreaPickerChange: function(e) {
				this.areaIndex = e.detail.value
			},
			bindWorkPickerChange: function(e) {
				this.workIndex = e.detail.value
			},
			bindPersonPickerChange: function(e) {
				this.personIndex = e.detail.value
			},
			
			formSubmit(e){
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}
	.form {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	.bg {
		margin-bottom: 30rpx;
		padding: 36rpx;
		background-color: #fff;
		border-radius: 5rpx;
	}
	
	.uni-form-item {
		padding-top: 38rpx;
		.title {
			margin-bottom: 16rpx;
			color: #333;
		}
	}
	
	.uni-input {
	    height: 64rpx;
	    padding: 0 20rpx;
	    line-height: 64rpx;
	    font-size: 24rpx;
	    background: #fff;
	    flex: 1;
		border: 1rpx solid #D7D7D7;
		border-radius: 5rpx;
		box-sizing: border-box;
	}
	
	.uploader {
		margin: 68rpx 0 95rpx;
		padding: 110rpx 0;
		text-align: center;
		border: 1rpx solid #D7D7D7;
		
		.iconfont {
			margin-bottom: 40rpx;
			font-size: 79rpx;
			color: #A0A5BA;
			transform: rotate(-45deg);
		}
		.title {
			font-size: 26rpx;
			font-weight: 400;
			color: #A0A5BA;
			line-height: 66rpx;
		}
	}
	
	.btn-box {
		padding: 102rpx 60rpx;
	}
</style>
